<script setup>
import { ref } from 'vue'

// 筛选条件
const filterModel = ref('')
const filterPartNo = ref('')
const filterDate = ref('')
const activeTab = ref('all')

// 当前订单信息
const currentOrder = ref({
  orderNo: '1892345819901982',
  orderDate: '2025-02-25 18:18:08',
  userName: 'serch',
  status: 'cancelled',
  shoujihao: '99999999999',
})

// 表格数据
const tableData = ref([
  {
    brand: '一汽奥迪',
    model: '奥迪A3 21款',
    partNo: '8YG 941 003 A',
    quality: '原厂',
    description: '大灯LED L',
    image: 'https://via.placeholder.com/50', // 占位图片URL
    supplierPrice: '7134',
    retailPrice: '11890.01',
    salePrice: '19998.2',
    quantity: '3',
    address: '收货地址',
    lianxi: '1234567890',
    beizhu: '真好',
  },
  {
    brand: '一汽奥迪',
    model: '奥迪A3 21款',
    partNo: '8YG 941 003 A',
    quality: '原厂',
    description: '大灯LED L',
    image: 'https://via.placeholder.com/50',
    supplierPrice: '7134',
    retailPrice: '11890.01',
    salePrice: '19998.2',
    quantity: '3',
    address: '收货地址',
  },
])

// 查询方法
const handleSearch = () => {}

// 重置方法
const handleReset = () => {
  filterModel.value = ''
  filterPartNo.value = ''
  filterDate.value = ''
}

const handleTabClick = (tab) => {
  console.log('当前标签页:', tab.name)
}
</script>
<template>
  <div class="order-management">
    <!-- 搜索过滤区域 -->
    <div class="filter-section">
      配置型号:<el-input
        v-model="filterModel"
        placeholder="配置型号"
        clearable
        class="filter-input"
      ></el-input>
      零件号:<el-input
        v-model="filterPartNo"
        placeholder="零件号"
        clearable
        class="filter-input"
      ></el-input>
      <el-date-picker
        style="width: 100px"
        v-model="filterDate"
        type="date"
        placeholder="选择日期"
        value-format="YYYY-MM-DD"
        class="filter-date"
      >
      </el-date-picker>
      <el-button type="primary" @click="handleSearch" class="filter-button"> 查询 </el-button>
      <el-button @click="handleReset" class="filter-button"> 重置 </el-button>
    </div>

    <!-- 状态筛选标签 -->
    <el-tabs v-model="activeTab" @tab-click="handleTabClick" class="status-tabs">
      <el-tab-pane label="全部 (9)" name="all"></el-tab-pane>
      <el-tab-pane label="待确认 (4)" name="pending"></el-tab-pane>
      <el-tab-pane label="已确认 (2)" name="confirmed"></el-tab-pane>
      <el-tab-pane label="已取消 (3)" name="cancelled"></el-tab-pane>
    </el-tabs>

    <!-- 订单信息头部 -->
    <div class="order-header">
      <div class="order-info">
        <span>订单号: {{ currentOrder.orderNo }}</span>
        <el-tag v-if="currentOrder.status === 'cancelled'" type="info"> 已取消 </el-tag>
      </div>
      <div class="order-date">下单日期: {{ currentOrder.orderDate }}</div>
      <div class="order-user">下单用户: {{ currentOrder.userName }}</div>
      <div class="order-user">手机号: {{ currentOrder.shoujihao }}</div>
    </div>

    <!-- 表格区域 -->
    <el-table :data="tableData" border style="width: 100%" class="order-table">
      <el-table-column prop="brand" label="品牌" width="100"></el-table-column>
      <el-table-column prop="model" label="车型" width="120"></el-table-column>
      <el-table-column prop="partNo" label="零件号" width="150"></el-table-column>
      <el-table-column prop="quality" label="配件品质" width="100"></el-table-column>
      <el-table-column prop="description" label="配件描述" width="120"></el-table-column>
      <el-table-column label="图片" width="100">
        <template #default="{ row }">
          <img :src="row.image" alt="配件图片" class="part-image" />
        </template>
      </el-table-column>
      <el-table-column
        prop="supplierPrice"
        label="建议修理厂供货价(含税)"
        width="180"
      ></el-table-column>
      <el-table-column prop="retailPrice" label="4S进货价" width="120"></el-table-column>
      <el-table-column prop="salePrice" label="4S销售价" width="120"></el-table-column>
      <el-table-column prop="quantity" label="配件数量" width="100"></el-table-column>
      <el-table-column prop="lianxi" label="联系方式" width="150"></el-table-column>
      <el-table-column prop="address" label="收货地址" min-width="200"></el-table-column>
      <el-table-column prop="beizhu" label="备注" width="200"></el-table-column>
    </el-table>
  </div>
  <el-pagination
    style="margin-left: 800px; margin-top: 30px"
    background
    layout="prev, pager, next"
    :total="1000"
  />
</template>

<style scoped>
.order-management {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.filter-section {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  align-items: center;
}

.filter-input {
  flex: 1;
}

.filter-date {
  width: 120px;
}

.filter-button {
  margin-left: 10px;
  padding: 8px 15px;
}

.status-tabs {
  margin-bottom: 20px;
}

.order-header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.order-info {
  font-size: 14px;
  color: #666;
}

.order-date,
.order-user {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}

.part-image {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.order-table {
  margin-top: 20px;
}

.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>
